<template>
    <div>
        <div class="mem_tit">订单列表</div>
        <div style="text-align: center;"> 
            <label>
                <span>商品名称:</span>
                <el-input
                    style="width:200px;margin:10px;"
                    placeholder="请输入内容"
                    prefix-icon="el-icon-search"  
                    v-model="queryParam.searchName"
                    clearable>
                </el-input>
                <span>创建时间：</span>
                <el-date-picker
                    value-format="yyyy-MM-dd HH:mm:ss"
                    v-model="dataArr"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
                <el-button
                    type="primary"
                    @click="getList(1,3,queryParam.searchName)">
                    搜索
                </el-button>
            </label>
        </div>
        <div v-if="pageInfo.list && pageInfo.list.length">
            <div  v-for="order in pageInfo.list" :key="order.id">
                <div class="order_tab" style="
                width: 900px;
                float:right;
                margin-bottom: 30px;
                background: white;
                border-collapse: collapse;">
                    <div style="display: flex;background: #f5f5f5;">
                        <div style="
                        flex: 1;
                        padding: 12px;
                        text-align: center;
                        font-weight: bold;">
                        用户名:{{order.loginName}}
                        </div>
                        <div style="
                        
                        padding: 12px;
                        text-align: center;
                        font-weight: bold;">
                        订单号:{{order.serialNumber}}
                        </div>
                        <div style="
                        flex: 1;
                        padding: 12px;
                        text-align: center;
                        font-weight: bold;">
                        地址:{{order.userAddress}}
                        </div>
                        <div style="
                        flex: 1;
                        padding: 12px;
                        text-align: center;
                        font-weight: bold;">
                        ￥{{order.cost}}
                        </div>
                    </div>
                    <!-- 直接渲染子组件 -->
                    <div>
                        <BackOrderPro :order-id="order.id" />
                    </div>
                    
                    <div class="pay" v-if="$store.state.userRole==0">
                        <div v-if="order.ispay==0 ">订单即将关闭，请尽快付款
                            <!-- <a :href="'/easybuy/zf?serialNumber=' + order.serialNumber">付款</a> -->
                            <div class="btn_u" style=" padding:0 20px; width:120px;float:right"><a @click.once="pay(1,order.serialNumber)" style="margin-left:0px;float:none">使用微信支付</a></div>
                            <div class="btn_u" style=" padding:0 20px; width:120px;float:right"><a @click.once="pay(0,order.serialNumber)" style="margin-left:0px;float:none">使用支付宝支付</a></div>
                            <!-- <a href="JavaScript:;" @click="zf(order.serialNumber,order.way)">付款</a> -->
                            <a href="JavaScript:;" @click="closeOrder(order.id)">关闭订单</a>
                        </div>
                        <div v-else-if="order.ispay==2">已关闭
                            <a href="JavaScript:; " @click="del(order.id)">删除</a>
                        </div>
                        <dir v-else-if="order.ispay==1" style="padding:0px">已完成
                            <a href="JavaScript:;" @click="del(order.id)">删除</a>
                            <a href="JavaScript:;" @click="tk(order.serialNumber)">退款</a>
                        </dir>
                        <dir v-else-if="order.ispay==3" style="padding:0px">已退款
                            <a href="JavaScript:;" @click="del(order.id)">删除</a>
                        </dir>
                    </div>
                    <div class="pay" v-if="$store.state.userRole==1">
                        <div v-if="order.ispay==0">未支付，订单即将关闭
                            <a href="JavaScript:;" @click="closeOrder(order.id)">关闭订单</a>
                        </div>
                        <div v-else-if="order.ispay==2">已关闭</div>
                        <dir v-else-if="order.ispay==1" style="padding:0px">已完成</dir>
                        <dir v-else-if="order.ispay==3" style="padding:0px">已退款</dir>
                    </div>
                </div>
            </div>    
            <el-pagination
                    style="text-align: center;float:right;"
                    v-if="pageInfo.pages>0"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryParam.pageNum"
                    :page-sizes="[3, 5, 10,20]"
                    :page-size="queryParam.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageInfo.total">
                </el-pagination>
        </div>
        <el-empty v-else description="暂无相关订单数据"></el-empty>
        
    </div>

</template>

<script>
import axios from 'axios';
import BackOrderPro from './BackOrderPro.vue';
export default {
    name:'BackOrders',
    components:{
        BackOrderPro
    },
    data() {
        return {
            pageInfo:{
                list: []  // 初始化 list 为空数组
            },
            dataArr:[],//获取的数据
            queryParam:{
                pageSize:3,
                pageNum:1,
                searchName:'',
                searchStartTime:'',
                searchEndTime:''
            },
        }
    },
    methods: {
        //进行订单退款
        tk(serialNumber){
            if(!confirm("确认退款？")){
                return;
            }
            axios({
                method:'get',
                url:'/easybuy/refund',
                params:{serialNumber},
            }).then(rs=>{
                if(rs.data.code==200){
                    alert("退款成功，金额将在3个工作日内退回");
                }else{
                    alert("退款失败，失败原因："+rs.data.msg);
                }
               // 延迟刷新订单列表
                    this.getList(1, 3, this.queryParam.searchName);
            })
        },
        //支付宝支付
        alipay(serialNumber){
            axios({
                    method:'get',
                    url:'/easybuy/zf',
                    params:{serialNumber}
                }).then(rs=>{
                    var mydiv = document.createElement('div');
                    mydiv.innerHTML=rs.data;
                    // 查找表单并验证
                    const form = mydiv.querySelector('form');
                    if (!form) {
                        throw new Error('支付表单未正确生成');
                    }
                    // 动态插入并提交
                    document.body.appendChild(mydiv);
                    form.submit(); // 直接使用找到的表单元素

                    // 延迟刷新订单列表
                    setTimeout(() => {
                        this.getList(1, 3, this.queryParam.searchName);
                    }, 3000);
                })
        },
        wxpay(serialNumber){
             this.$axios({
                     method:'post',
                     url:'/easybuy/wxzf',
                     data:{
                         outTradeNo:serialNumber
                     }
                 }).then(rs=>{
                     this.$router.push({path:'/show-code',query:{url:rs.data.pay_url,'outTradeNo':serialNumber}});
                 })
         },
         pay(payway,serialNumber){
                 if(payway == 1){
                 this.wxpay(serialNumber);
                 }else{
                 this.alipay(serialNumber);
                 }
             },
        //进行支付
        // zf(serialNumber,way){
        //         //支付宝
        //         axios({
        //             method:'get',
        //             url:'/easybuy/zf',
        //             params:{serialNumber}
        //         }).then(rs=>{
        //             var mydiv = document.createElement('div');
        //             mydiv.innerHTML=rs.data;
        //             // 查找表单并验证
        //             const form = mydiv.querySelector('form');
        //             if (!form) {
        //                 throw new Error('支付表单未正确生成');
        //             }
        //             // 动态插入并提交
        //             document.body.appendChild(mydiv);
        //             form.submit(); // 直接使用找到的表单元素

        //             // 延迟刷新订单列表
        //             setTimeout(() => {
        //                 this.getList(1, 3, this.queryParam.searchName);
        //             }, 3000);
        //         })
        // },
        //管理员关闭订单
        closeOrder(orderid){
            if(!confirm("确认关闭订单？")){
                return;
            }
            axios({
                method:'get',
                url:'/easybuy/order/closeOrder',
                params:{orderid}
            }).then(rs=>{
                console.log(rs.data.msg)
                this.getList(1,3,this.queryParam.searchName)
            })
        },
        //删除
        del(id){
            if(!confirm("确认删除订单？")){
                return;
            }
            axios({
                method:'get',
                url:"/easybuy/order/del",
                params:{id}
            }).then(rs=>{
                console.log(rs.data.msg)
                this.getList(1,3,this.queryParam.searchName)
            })
        },
        //当前页发生变化的方法
        handleCurrentChange(num){
            this.queryParam.pageNum = num;
            this.getList(this.queryParam.pageNum,this.queryParam.pageSize,this.queryParam.searchName);           
         },
        //当前页容量发生变化时的方法
        handleSizeChange(num){
            console.log(num)
            this.queryParam.pageSize = num;
            this.getList(this.queryParam.pageNum,this.queryParam.pageSize,this.queryParam.searchName);      
                         },
        //获取订单表数据
        getList(pageNum,pageSize,searchName){
             if(this.dataArr!=null && this.dataArr.length > 0){
                this.queryParam.searchStartTime = this.dataArr[0];
                this.queryParam.searchEndTime = this.dataArr[1];
            }else{
                this.dataArr = [];
                this.queryParam.searchStartTime = '';
                this.queryParam.searchEndTime = '';
            }
            this.$axios({
                method:'get',
                url:'/easybuy/order/getListbyUser',
                params:{
                    pageNum,
                    pageSize,
                    searchName,
                    searchStartTime:this.queryParam.searchStartTime,
                    searchEndTime:this.queryParam.searchEndTime
                }
            }).then((rs) => {
                console.log(pageNum,pageSize)
                 // 添加默认值，确保数据结构稳定
                this.pageInfo = rs.data.pageInfo || { list: [] };
            })
        }
    },
    mounted() {
         this.getList(this.queryParam.pageNum,this.queryParam.pageSize,this.queryParam.searchName,this.queryParam.searchStartTime,this.queryParam.searchEndTime);      
    },
}
</script>

<style>
    .pay{
        font-size:18px
    }
    .pay a{
        float: right;
        margin-left: 10px;
    }
</style>